<template>
  <s-layout title="推广人排行榜">
    <view class="PromoterRank" style="backgroundcolor: red">
      <view class="redBg bg-color">
        <view class="header">
          <view class="nav acea-row row-center-wrapper" style="display: flex">
            <view
              class="item"
              :class="state.currentTab === index ? 'font-color' : ''"
              v-for="(item, index) in tabMaps"
              :key="index"
              @click="switchTap(index)"
            >
              {{ item }}
            </view>
          </view>
          <!-- top3 排名 -->
          <view class="rank acea-row row-bottom row-around">
            <view class="item" v-show="state.two.id">
              <view class="pictrue">
                <image :src="state.two.avatar"></image>
              </view>
              <view class="name line1">{{ state.two.nickname }}</view>
              <view class="num">{{ state.two.brokerageUserCount }}人</view>
            </view>
            <view class="item" v-show="state.one.id">
              <view class="pictrue">
                <image :src="state.one.avatar"></image>
              </view>
              <view class="name line1">{{ state.one.nickname }}</view>
              <view class="num">{{ state.one.brokerageUserCount }}人</view>
            </view>
            <view class="item" v-show="state.three.id">
              <view class="pictrue">
                <image :src="state.three.avatar"></image>
              </view>
              <view class="name line1">{{ state.three.nickname }}</view>
              <view class="num">{{ state.three.brokerageUserCount }}人</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 其它排名 -->
      <view class="list" v-if="state.rankList.length">
        <view
          class="item acea-row row-between-wrapper"
          v-for="(item, index) in state.rankList"
          :key="index"
        >
          <view class="num">{{ index + 4 }}</view>
          <view class="picTxt acea-row row-between-wrapper">
            <view class="pictrue">
              <image :src="item.avatar"></image>
            </view>
            <view class="text line1">{{ item.nickname }}</view>
          </view>
          <view class="people font-color">{{ item.brokerageUserCount }}人</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import BrokerageApi from '@/sheep/api/trade/brokerage';

  const tabMaps = ['周排行', '月排行'];

  const state = reactive({
    currentTab: 0,

    rankList: [],
    times: [],

    one: {}, // 排名第一
    two: {}, // 排名第二
    three: {}, // 排名第三
  });

  function switchTap(index) {
    if (state.currentTab === index) {
      return;
    }
    state.currentTab = index;
    calculateTimes();
    getRankList();
  }

  async function getRankList() {
    // 重置数据
    state.one = {};
    state.two = {};
    state.three = {};
    state.rankList = [];
    // 查询
    const { code, data } = await BrokerageApi.getBrokerageUserRankPageByUserCount({
      pageNo: 1,
      pageSize: 10,
      'times[0]': state.times[0],
      'times[1]': state.times[1],
    });
    if (code !== 0) {
      return;
    }
    state.rankList = data.list;
    state.one = state.rankList.shift() || {};
    state.two = state.rankList.shift() || {};
    state.trhee = state.rankList.shift() || {};
  }

  function calculateTimes() {
    let times;
    if (state.currentTab === 0) {
      times = getWeekTimes();
    } else {
      times = getMonthTimes();
    }
    state.times = [formatDate(times[0]), formatDate(times[1])];
  }

  onLoad(function () {
    calculateTimes();
    getRankList();
  });

  function formatDate(date) {
    return sheep.$helper.timeFormat(date, 'yyyy-mm-dd hh:MM:ss');
  }

  // TODO 芋艿：此处可考虑抽离
  // 此处可考虑抽离
  /**
   * 获得当前周的开始和结束时间
   */
  function getWeekTimes() {
    const today = new Date();
    const dayOfWeek = today.getDay();
    return [
      new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek, 0, 0, 0),
      new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() + (6 - dayOfWeek),
        23,
        59,
        59,
      ),
    ];
  }

  /**
   * 获得当前月的开始和结束时间
   */
  function getMonthTimes() {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    const startDate = new Date(year, month, 1, 0, 0, 0);
    const nextMonth = new Date(year, month + 1, 1);
    const endDate = new Date(nextMonth.getTime() - 1);
    return [startDate, endDate];
  }
  // TODO 芋艿：css 需要优化下；并且展示样式有问题
</script>

<style lang="scss" scoped>
  .PromoterRank .redBg {
    padding: 45rpx 0 30rpx 0;
  }

  .PromoterRank .header {
    background: url('')
      no-repeat;
    width: 100%;
    height: 460rpx;
    background-size: 100% 100%;
  }

  .PromoterRank .header .nav {
    width: 450rpx;
    height: 66rpx;
    border: 1px solid #fff;
    border-radius: 33rpx;
    font-size: 30rpx;
    color: #fff;
    margin: 0 auto;
  }

  .PromoterRank .header .nav .item {
    width: 223rpx;
    height: 100%;
    text-align: center;
    line-height: 60rpx;
  }

  .PromoterRank .header .nav .item.font-color:nth-of-type(1) {
    background-color: #fff;
    border-radius: 33rpx 0 0 33rpx;
    color: red;
  }

  .PromoterRank .header .nav .item.font-color:nth-of-type(2) {
    background-color: #fff;
    border-radius: 0 33rpx 33rpx 0;
    color: red;
  }

  .PromoterRank .header .rank {
    padding: 0 20rpx;
    margin-top: 30rpx;
  }

  .PromoterRank .header .rank .item .pictrue {
    background: url('')
      no-repeat;
    background-size: 100% 100%;
    width: 136rpx;
    height: 177rpx;
    position: relative;
    margin: 0 auto;
  }

  .PromoterRank .header .rank .item .pictrue image {
    position: absolute;
    width: 130rpx;
    height: 130rpx;
    display: block;
    bottom: 2rpx;
    border-radius: 50%;
    left: 50%;
    margin-left: -65rpx;
  }

  .PromoterRank .header .rank .item:nth-of-type(2) .pictrue {
    background-image: url('');
    width: 156rpx;
    height: 205rpx;
  }

  .PromoterRank .header .rank .item:nth-of-type(2) .pictrue image {
    width: 150rpx;
    height: 150rpx;
    margin-left: -75rpx;
  }

  .PromoterRank .header .rank .item:nth-of-type(3) .pictrue {
    background-image: url('');
  }

  .PromoterRank .header .rank .item:nth-of-type(3) .pictrue image {
    margin-left: -64rpx;
  }

  .PromoterRank .header .rank .item .name {
    font-size: 30rpx;
    color: #fff;
    margin-top: 22rpx;
    text-align: center;
    width: 170rpx;
  }

  .PromoterRank .header .rank .item .num {
    font-size: 30rpx;
    color: #fff;
    text-align: center;
  }

  .PromoterRank .list {
    width: 710rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin: -60rpx auto 0 auto;
    padding: 0 30rpx;
  }

  .PromoterRank .list .item {
    border-bottom: 1px solid #f3f3f3;
    height: 101rpx;
    font-size: 28rpx;
  }

  .PromoterRank .list .item .num {
    color: #666;
    width: 70rpx;
  }

  .PromoterRank .list .item .picTxt {
    width: 350rpx;
  }

  .PromoterRank .list .item .picTxt .pictrue {
    width: 68rpx;
    height: 68rpx;
  }

  .PromoterRank .list .item .picTxt .pictrue image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
  }

  .PromoterRank .list .item .picTxt .text {
    width: 262rpx;
    color: #333;
  }

  .PromoterRank .list .item .people {
    width: 175rpx;
    text-align: right;
  }
</style>
